<template>
  <div class="hint">
    <div class="header">
      <div class="title">{{languageJson.setting.notice}}</div>
      <div class="tips">
        {{languageJson.message.noticeExplain}}
      </div>
    </div>
    <div class="list">
      <div class="item_header">
        <div class="text1"></div>
        <div class="text2">{{languageJson.setting.windowTips}}</div>
        <div class="text3">{{languageJson.setting.voice}}</div>
      </div>

      <div class="item_tips">
        <div class="text1">
          <div class="dian"></div>
          <div>{{languageJson.setting.eventTips}}</div>
        </div>
      </div>

      <div class="item_content">
        <div class="text1">{{languageJson.setting.matchStart}}</div>
        <div class="text2">
          <el-checkbox v-model="state.formData.hint.begin.hint" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
        <div class="text3">
          <el-checkbox v-model="state.formData.hint.begin.sound" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
      </div>

      <div class="item_content">
        <div class="text1">{{languageJson.setting.goalTips}}</div>
        <div class="text2">
          <el-checkbox v-model="state.formData.hint.goal.hint" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
        <div class="text3">
          <el-checkbox v-model="state.formData.hint.goal.sound" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
      </div>

      <div class="item_content">
        <div class="text1">{{languageJson.setting.redcardTips}}</div>
        <div class="text2">
          <el-checkbox v-model="state.formData.hint.red_card.hint" :true-value="1" :false-value="0" @change="settingtore.changeformData"/>
        </div>
        <div class="text3">
          <el-checkbox v-model="state.formData.hint.red_card.sound" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
      </div>

      <div class="item_tips">
        <div class="text1">
          <div class="dian"></div>
          <div>{{languageJson.setting.orderState}}</div>
        </div>
      </div>

      <div class="item_content">
        <div class="text1">{{languageJson.setting.completeTips}}</div>
        <div class="text2">
          <el-checkbox v-model="state.formData.hint.order_fulfil.hint" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
        <div class="text3">
          <el-checkbox v-model="state.formData.hint.order_fulfil.sound" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
      </div>

      <div class="item_content">
        <div class="text1">{{languageJson.setting.interruptTips}}</div>
        <div class="text2">
          <el-checkbox v-model="state.formData.hint.order_break.hint" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
        <div class="text3">
          <el-checkbox v-model="state.formData.hint.order_break.sound" :true-value="1" :false-value="0" @change="settingtore.changeformData" />
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
const userStore = useUserStore()
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const { settingtore, state } = inject('SettingStore')
</script>

<style lang="scss" scoped>
.hint {
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

    .title {
      font-family: AlibabaPuHuiTi_2_85_;
      font-size: 14px;
      font-weight: bold;
      color: #000;
    }
    .tips {
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(55, 17, 216, 0.08);
    border-right: 1px solid rgba(55, 17, 216, 0.08);
    border-top: 1px solid rgba(55, 17, 216, 0.08);

    .item_header {
      height: 32px;
      background-color: #f3f5fd;
      display: flex;
      align-items: center;

      .text2,
      .text3 {
        font-family: AlibabaPuHuiTi_2_65_;
        font-size: 14px;
        color: #000;
      }
    }

    .item_tips {
      height: 32px;
      background-color: #f8f9fe;
      display: flex;
      align-items: center;

      .text1 {
        display: flex;
        align-items: center;
        font-family: AlibabaPuHuiTi_2_55_;
        font-size: 14px;
        color: #666;

        .dian {
          width: 4px;
          height: 4px;
          background-color: #666;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }

    .item_content {
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(55, 17, 216, 0.08);
      // border-left: 1px solid rgba(55, 17, 216, 0.08);
      // border-right: 1px solid rgba(55, 17, 216, 0.08);

      .text1 {
        display: flex;
        font-family: AlibabaPuHuiTi_2_55_;
        font-size: 14px;
        color: #000;
      }
    }

    .text1 {
      padding: 0 0 0 12px;
      width: 230px;
      text-align: center;
    }
    .text2 {
      width: 120px;
      margin-right: 64px;
      text-align: center;
    }
    .text3 {
      flex: 1;
      text-align: center;
    }
  }
}
</style>